{% extends "base.html" %}

{% block title %}西门子PLC{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}

{% block navlist %}
<a class="btn btn-dark" href="/setting">Back to Setting</a>
{% endblock navlist %}

{% block content %}

<div class="container-fluid" style="" id="jumbotron">
	<div class="jumbotron jumbotron-fluid" style="background-color: rgba(231, 231, 233, 0.746);padding:20px">
		<div class="row">
			<div class="col-md-5" style="text-align: justify;">
				<img class="img-fluid" src="/static/siemens.png" alt="Siemens">
			</div>
			<div class="col-md-6">
				<strong>基于Python-Snap7，西门子S7协议采集，写入InfluxDB，转换为OPC UA
					{% with messages = get_flashed_messages(category_filter=["run"]) %}
					{% if messages %}
					{% for message in messages %}
					{% if message%}
					<h5><span class="badge badge-success">Running</span></h5>
					{% endif %}
					{% endfor %}
					{% endif %}
					{% endwith %}
				</strong>
			</div>
		</div>
	</div>
</div>

<div class="container-fluid" id="connection">

	<!-- form-control属性很重要 -->
	<form class="form-inline" method="POST">
		<!-- < class="form-inline"> -->
		<label for="ipaddress">IP address：</label>
		<input type="text" name="ipaddress" value="{{ipaddress}}" class="form-control required" id="ipaddress">
		<label for="rack">Rack:</label>
		<select class="form-control" name="rack" id="rack">
			<option>0</option>
			<option>1</option>
			<option>2</option>
			<option>3</option>
		</select>
		<label for="slot">Slot：</label>
		<select class="form-control" name="slot" id="slot">
			<option>0</option>
			<option selected>1</option>
			<option>2</option>
			<option>3</option>
		</select>
		<button type="submit" name="Action" value="s7connect" class="btn btn-primary form-control"
			style="margin: 10px;">开始连接</button>
		<!-- onclick事件调用的是js 用href通过路由可以调用python程序 -->
		<button type="submit" name="Action" value="s7disconnect" class="btn btn-danger form-control"
			style="margin: 10px;">断开连接</button>
		<!-- <a href="s7disconnect" type="button" class="btn btn-danger form-control" style="margin: 10px;">断开连接</a> -->

		{% with messages = get_flashed_messages(category_filter=["connect1"]) %}
		{% if messages %}
		{% for message in messages %}
		<div class="alert alert-success alert-dismissible fade show form-control"
			style="margin:0px 0px 0px 10px; padding-top:5px" role="alert">
			<strong>{{message}}</strong>
			<button type="button" class="close" data-dismiss="alert" aria-label="Close">
				<span aria-hidden="true">&times;</span>
			</button>
		</div>
		{% endfor %}
		{% endif %}
		{% endwith %}

		{% with messages = get_flashed_messages(category_filter=["connect0"]) %}
		{% if messages %}
		{% for message in messages %}
		<div class="alert alert-danger alert-dismissible fade show form-control" style="margin:0px 0px 0px 10px;"
			role="alert">
			<strong>{{message}}</strong>
			<button type="button" class="close" data-dismiss="alert" aria-label="Close">
				<span aria-hidden="true">&times;</span>
			</button>
		</div>
		{% endfor %}
		{% endif %}
		{% endwith %}

		<!-- <script>
				window.setTimeout(function(){
					  $('[data-dismiss="alert"]').alert('close');},4000);
				</script> -->
		<!-- 提示框定时消失 -->
	</form>


	<form class="form-inline" method="POST" style="margin-top:20px;" id="iqmselect">
		<!-- url_for区分按钮动作的调用函数 -->
		<!-- 表单添加name属性，写入字典 -->
		<label for="iqm">变量选择：</label>
		<select class="form-control" name="iqm" id="iqm">
			<option value="PE">Input</option>
			<option value="PA">Ouput</option>
			<option value="MK">Memory</option>
		</select>
		<label for="address">地址：</label>
		<input type="number" step="0.1" placeholder="0.0" name="address" class="form-control required" id="address">

		<button type="submit" name="Action" value="s7read" id="read" class="btn btn-outline-primary">S7 Read</button>
		<button type="button" id="write" class="btn btn-outline-secondary" disabled>S7 Write</button>
		<button type="button" class="btn" style="background-color: teal; color: white; margin-left: 10px;">加入列表</button>
		<!-- <script>
							// function aa() {
							// 	document.getElementById("read").setAttribute("disabled",false);
							// 	document.getElementById("write").setAttribute("disabled",false);
							// }
							
			</script> -->

	</form>

	<div class="container-fluid" style="">
		<label for="file">导入变量表</label>
		<!-- <p>变量表格式 对于数组如何处理？列出每个元素太浪费了 读取效率低下 Pylogix 0.6.2批量读取的数量上限？之前是20个</p> -->
	
		<form method="POST" enctype=multipart/form-data>
			<div class="row">
				<div class="col-md-4">
					<input type="file" class="form-control-file btn btn-outline-secondary" name="file" id="file"
						placeholder="" aria-describedby="fileHelpId">
				</div>
				<div class="col-md-6">
	
					<button type="submit" name="Action" value="file" class="btn btn-secondary " style="padding-left:60px;padding-right: 60px;"
						>上传</button>
					<button type="submit" name="Action" value="s7multiread" style="padding-left: 40px;padding-right: 40px;"
						class=" btn btn-primary">批量读取</button>
				</div>
			</div>
		</form>
		{% with messages = get_flashed_messages(category_filter=["uploadstatus"]) %}
		{% if messages %}
		{% for message in messages %}
		<div class="alert alert-primary alert-dismissible fade show" style="width: 50%;margin: 10px;" role="alert">
			<button type="button" class="close" data-dismiss="alert" aria-label="Close">
				<span aria-hidden="true">&times;</span>
				<span class="sr-only">Close</span>
			</button>
			<strong>{{message}}</strong>
		</div>
	
		{% endfor %}
		{% endif %}
		{% endwith %}
	</div>

<div class="container-fluid" style="margin-top:20px;" id="数据结果">
	<div class="row">
		<div class="col-lg-6">
			<h4>数据读取结果</h4>
			<table class="table table-responsive table-hover"
				style="background: rgb(237, 238, 240);height: 300px;overflow-y: auto;" id="ii">
				<thead class="thead-dark">
					<tr>
						<th style="width: 240px;">Time</th>
						<th style="width: 340px;">Tagname</th>
						<th style="width: 120px;">Value</th>
					</tr>
				</thead>
				<tbody>
					{% for data in siemensdata %}
					<tr>
						<td>{{ttt}}</td>
						<td>{{data}}</td>
						<td>{{siemensdata[data]}}</td>
					</tr>
					{% endfor %}
				</tbody>
			</table>
			<!-- </div> -->
		</div>
		<!-- Js设置 变量True False颜色不同 -->
		<script type="text/javascript">
			var table1 = document.getElementById("ii"); //table id
			var len = table1.tBodies[0].rows.length;

			for (i = 0; i < len; i++) {
				if (table1.tBodies[0].rows[i].cells[2].innerHTML == "False") {
					table1.tBodies[0].rows[i].cells[2].style.color = "red";
				}
				if (table1.tBodies[0].rows[i].cells[2].innerHTML == "True") {
					table1.tBodies[0].rows[i].cells[2].style.color = "green";
				}
			}
		</script>

		<div class="col-md-6">
			<h4>
				批量读取列表
			</h4>
			<table class="table table-responsive  table-hover "
				style="height: 300px;overflow-y: auto;background: rgb(237, 238, 240);color: rgb(0, 0, 0);">
				<thead class="thead-dark">
					<tr>
						<th style="width:700px;">Variable</th>
					</tr>
				</thead>
				<tbody>
					{% for data in siemensdata %}
					<tr>
						<td>{{data}}</td>
					</tr>
					{% endfor %}
				</tbody>
			</table>
		</div>
	</div>
</div>
{% endblock  %}